<template>
    <div class="Mybox">
        <div class="top">
            <img src="https://img.alicdn.com/tfs/TB1sJWbjhv1gK0jSZFFXXb0sXXa-312-60.png" alt="">
        </div>
        <div class="center">
            <div class="center1">
                <input class="user" placeholder="请输入用户名" />
            </div>
            <div class="center2">
                <div class="center2Box">
                    <div class="center2_1">
                        <input class="user1" type="password" placeholder="请输入密码" v-model="srmima" @type="inputType" />
                    </div>
                </div>
            </div>
        </div>
        <!-- @input="checkUsername" -->
        <div class="tongyi" @click="ty">
            <img src="../img/选中红.png" alt="" v-if="tongyi">
            <img src="../img/未选中.png" alt="" v-if="!tongyi">
            <span>我已阅读并同意</span><a href=""> 隐私政策</a><span> 和</span> <a href=""> 用户协议</a>
        </div>
        <!-- 修改这里 -->
        <div class="denglu1" v-if="!tongyi || !srmima" @click="login">
            <p>登录</p>
        </div>
        <div class="denglu" v-if="tongyi && srmima" @click="login">
            <p>登录</p>
        </div>
        <div class="zhuce">
            <p>注册</p>
            <p>使用验证码登陆</p>
        </div>
        <div class="bootom">
            <div class="bootom1">
                <p @click="dlzt">其他登陆方式</p>
                <img src="//kaola-haitao.oss.kaolacdn.com/b2022701-bf9c-4c4f-bc65-e48da4b5dfe5_28_28.png" alt=""
                    v-if="dlimg">
                <img src="//kaola-haitao.oss.kaolacdn.com/976c8d7b-c2e2-4108-abfe-765d48a25a36_28_28.png" alt=""
                    v-if="!dlimg">
            </div>
            <div class="bootom2" v-show="dl">
                <img src="//kaola-haitao.oss.kaolacdn.com/e491c1e7-7849-4d58-b967-2c896ec8f2f6_72_72.png" alt="">
                <img src="//kaola-haitao.oss.kaolacdn.com/c069d541-f233-42a5-9d6c-e44f63e8939f_72_72.png" alt=""
                    class="bootomtp">
                <img src="//kaola-haitao.oss.kaolacdn.com/9dedbeef-c3e7-4d73-920b-a49af654036c_72_72.png" alt="">
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const srmima = ref('')
const inputType = ref('password')
const dl = ref(false)
const tongyi = ref(true)
const dlimg = ref(true)
const denglumima = ref('123')
const ismima = computed(() => srmima.value === denglumima.value)
const dlzt = () => {
    dl.value = !dl.value
    dlimg.value = !dlimg.value
}

const ty = () => {
    tongyi.value = !tongyi.value
}

const login = () => {
    if (srmima.value === denglumima.value && tongyi.value) {
        router.push('/home')
    } else {
        alert('请勾选同意条款或者输入正确的密码')
    }
}
</script>


<style scoped>
/* 样式部分保持不变 */
.Mybox {
    height: 6rem;
    font-size: 0.16rem;
    background-color: #fff;
    padding-top: 0.3rem;

}

.Mybox .top img {
    width: 1.56rem;
    height: 0.3rem;
}

.Mybox .top {
    width: 1.58rem;
    height: 0.32rem;
    margin: 0 auto;
}

.denglu a {
    color: #fff;
}

.denglu1 a {
    color: #fff;
}

.Mybox .center1 {
    width: 3.17rem;
    height: 0.42rem;
    background-color: #f5f5f5;
    text-align: center;
    line-height: 0.38rem;
    /* border-radius: 1rem; */
    margin: 0 auto;
    margin-top: 0.3rem;
    padding-left: 0.16rem;
}

.Mybox .user {
    width: 3rem;
    height: 0.3rem;
    border-radius: 1rem;
    background-color: #f5f5f5;
    border: none;
    outline: none;
}

.Mybox .center1 input {
    border: none !important;
    outline: none !important;
}

.Mybox .center2 {
    width: 3.17rem;
    height: 0.42rem;
    background-color: #f5f5f5;
    text-align: center;
    line-height: 0.38rem;
    border-radius: 1rem;
    margin: 0 auto;
    margin-top: 0.3rem;
}

.Mybox .center2 img {
    width: 0.24rem;
    height: 0.24rem;
}

.center2_1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.07rem 0.2rem 0.2rem 0.2rem;

}

.Mybox .user1 {
    width: 2.5rem;
    height: 0.3rem;
    border-radius: 1rem;
    background-color: #f5f5f5;
    border: none;
    outline: none;
}

.tongyi img {
    width: 0.16rem;
    height: 0.16rem;
}

.tongyi {
    font-size: 0.1rem;
    color: #999999;
    margin-left: 0.25rem;
    margin-top: 0.1rem;
}

.Mybox .denglu {
    width: 3.17rem;
    height: 0.42rem;
    color: #ffffff;
    background-image: linear-gradient(-90deg, #f00 0, #ff3264 100%);
    text-align: center;
    line-height: 0.38rem;
    border-radius: 1rem;
    margin: 0 auto;
    margin-top: 0.1rem;
}

.Mybox .denglu1 {
    width: 3.17rem;
    height: 0.42rem;
    color: #ffffff;
    background-image: linear-gradient(-90deg, rgb(235, 161, 161) 0, #e1a1a1 100%);
    text-align: center;
    line-height: 0.38rem;
    border-radius: 1rem;
    margin: 0 auto;
    margin-top: 0.1rem;
}

.zhuce {
    font-size: 0.12rem;
    color: #999999;
    display: flex;
    justify-content: space-between;
    margin-top: 0.1rem;
    padding: 0rem 0.25rem;
}

.bootom {
    color: #333;
    font-size: 0.14rem;
    margin: 0.8rem auto;
    text-align: center;
}

.bootom1 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bootom1 img {
    width: 0.12rem;
    height: 0.12rem;
    margin-top: 0.02rem;
    margin-left: 0.04rem;
}

.bootom2 img {
    width: 0.36rem;
    height: 0.36rem;
}

.bootom2 {
    margin-top: 0.2rem;
    display: flex;
    justify-content: center;
}

.bootomtp {
    margin: 0 0.2rem;
}
</style>